import { Button, Card, Checkbox, Form, Input } from 'antd'
import './index.less'
import logo from '@/assets/logo.png'
export default function Login() {
  const onFinish = val => {
    console.log(val)
  }
  return (
    <>
      <div className='login'>
        <Card className='login-container'>
          <img src={logo} className='login-logo' alt='' />
          <Form
            name='basic'
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 600 }}
            onFinish={onFinish}
            autoComplete='off'
            validateTrigger='onBlur'
          >
            <Form.Item
              label='手机号'
              name='mobile'
              rules={[
                { required: true, message: '请输入手机号' },
                { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式' }
              ]}
            >
              <Input placeholder='请输入手机号' />
            </Form.Item>

            <Form.Item label='验证码' name='code' rules={[{ required: true, message: '请输入验证码' }]}>
              <Input.Password placeholder='请输入密码' />
            </Form.Item>

            <Form.Item name='remember' valuePropName='checked' wrapperCol={{ offset: 6, span: 16 }}>
              <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
              <Button type='primary' htmlType='submit'>
                Submit
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    </>
  )
}
// export default Login
